<template>
  <div class="expressage">
    <!-- 头部 -->
    <h2>快递管理</h2>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="快递取件码">
        <el-input
          v-model="formInline.user"
          placeholder="请输入快递取件码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="value1" placeholder="请选择快递公司" clearable>
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="value2" placeholder="请选择快递状态" clearable>
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="onSubmit">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="200">
        <template slot-scope="scope">{{
          scope.row.express_time | dateFormat
        }}</template>
      </el-table-column>
      <el-table-column
        prop="express_num"
        label="快递单号"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="express_code"
        label="快递取件码"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>
      <el-table-column prop="owner_id" label="住户" width="120">
      </el-table-column>
      <el-table-column prop="express_address" label="住址" width="120">
      </el-table-column>
      <el-table-column
        prop="express_company"
        label="快递公司"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.express_company == 1">京东</span>
          <span v-else-if="scope.row.express_company == 2">顺丰</span>
          <span v-else-if="scope.row.express_company == 3">中通</span>
          <span v-else-if="scope.row.express_company == 4">韵达</span>
          <span v-else-if="scope.row.express_company == 5">申通</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="express_status"
        label="快递状态"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.express_status == 1">未取件</span>
          <span v-else-if="scope.row.express_status == 2">已取件</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <div class="expressModel">
      <div class="mask" v-show="expressBoolean" @click="cancelModel"></div>
      <div class="content" :class="expressBoolean ? 'userContent' : ''">
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <h3>{{ modelTitle }}快递信息</h3>
          <el-form-item label="取货码" prop="code">
            <el-input
              v-model="ruleForm.code"
              placeholder="请输入快递取件码"
            ></el-input>
          </el-form-item>
          <el-form-item label="住户姓名" prop="owner">
            <el-input
              v-model="ruleForm.owner"
              placeholder="请输入住户姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号" prop="num">
            <el-input
              v-model="ruleForm.num"
              placeholder="请输入快递单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递状态" prop="status">
            <el-input
              v-model="ruleForm.status"
              placeholder="1：未取件 2：已取件"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递公司" prop="company">
            <el-input
              v-model="ruleForm.company"
              placeholder="1:京东 2：顺丰 3：中通 4：韵达 5：申通"
            ></el-input>
          </el-form-item>
          <el-form-item label="住址" prop="address">
            <el-input
              v-model="ruleForm.address"
              placeholder="请输入住址"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{
              modelTitle
            }}</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getExpressList,
  addExpressList,
  changeExpress,
  detailExpress,
  delExpress,
} from "../api/api";
import { Message } from "element-ui";
export default {
  // 定义属性
  name: "Expressage",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      options1: [
        {
          value: "1",
          label: "京东",
        },
        {
          value: "2",
          label: "顺丰",
        },
        {
          value: "3",
          label: "中通",
        },
        {
          value: "4",
          label: "韵达",
        },
        {
          value: "5",
          label: "申通",
        },
      ],
      value1: "",
      options2: [
        {
          value: "1",
          label: "未取件",
        },
        {
          value: "2",
          label: "已取件",
        },
      ],
      value2: "",
      tableData: [],
      multipleSelection: [],
      page: 1,
      size: 5,
      total: null,
      expressBoolean: false,
      modelTitle: "添加",
      express_id: null,
      express_status: "",
      ruleForm: {
        code: "",
        owner: "",
        num: "",
        status: "",
        company: "",
        address: "",
      },
      rules: {
        code: [
          { required: true, message: "请输入快递取件码", trigger: "blur" },
        ],
        owner: [{ required: true, message: "请输入住户姓名", trigger: "blur" }],
        num: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请输入快递状态",
            trigger: "blur",
          },
        ],
        company: [
          {
            required: true,
            message: "请输入快递公司",
            trigger: "blur",
          },
        ],
        address: [{ required: true, message: "请输入住址", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 查询
    onSearch() {
      this.getList();
    },
    // 添加
    onSubmit() {
      // console.log("submit!");
      this.modelTitle = "添加";
      this.expressBoolean = true;
    },
    // 全选反选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 快递状态过滤器
    filterTag(value, row) {
      return row.express_status === value;
    },
    // handleFilterChange(filters) {
    //   console.log(filters);
    //   if (filters.aStatus) {
    //     this.express_status = filters.aStatus[0];
    //   }
    //   this.getList();
    // },
    // 修改
    handleEdit(index, row) {
      console.log(index, row);
      this.express_id = row.express_id;
      detailExpress({ express_id: row.express_id }).then((res) => {
        if (res.code == 200) {
          this.ruleForm.code = res.data.express_code;
          this.ruleForm.owner = res.data.express_owner;
          this.ruleForm.num = res.data.express_num;
          this.ruleForm.status = res.data.express_status;
          this.ruleForm.company = res.data.express_company;
          this.ruleForm.address = res.data.express_address;

          this.expressBoolean = true;
          this.modelTitle = "修改";
        }
      });
    },
    // 关闭模态窗口，清空内容
    cancelModel() {
      this.expressBoolean = false;
      // 重置表单
      this.$refs["ruleForm"].resetFields();
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
      delExpress({ express_id: row.express_id }).then((res) => {
        if (res.code == 200) {
          Message({
            type: "success",
            message: res.message,
          });
          this.tableData.splice(index, 1);
        }
      });
    },
    // 条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getList();
    },
    // 页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getList();
    },
    // 获取快递列表
    getList() {
      getExpressList({
        express_code: this.formInline.user,
        express_company: this.value1,
        express_status:this.value2,
        page: this.page,
        size: this.size,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    // 提交添加、修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          if (this.modelTitle == "添加") {
            // 添加接口
            addExpressList({
              express_code: this.ruleForm.code,
              express_owner: this.ruleForm.owner,
              express_num: this.ruleForm.num,
              express_status: this.ruleForm.status,
              express_company: this.ruleForm.company,
              express_address: this.ruleForm.address,
            }).then((res) => {
              if (res.code == 200) {
                Message({
                  message: "添加成功！",
                  type: "success",
                });
                this.getList();
                this.expressBoolean = false;
              } else if (res.code == 201) {
                Message({
                  message: res.messages,
                  type: "error",
                });
              }
            });
          } else if (this.modelTitle == "修改") {
            // 修改接口
            changeExpress({
              express_id: this.express_id,
              express_code: this.ruleForm.code,
              express_owner: this.ruleForm.owner,
              express_num: this.ruleForm.num,
              express_status: this.ruleForm.status,
              express_company: this.ruleForm.company,
              express_address: this.ruleForm.address,
            }).then((res) => {
              if (res.code == 200) {
                Message({
                  message: "修改成功",
                  type: "success",
                });
                this.expressBoolean = false;
                this.getList();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  filters: {
    // 私有过滤时间的方法
    dateFormat(date) {
      // console.log(date);
      var dt = new Date(date);
      // 获取年
      var y = dt.getFullYear();
      // console.log(y)
      // 获取月
      var m = (dt.getMonth() + 1).toString().padStart(2, "0");
      // m = m < 10 ? "0" + m : m
      // console.log(m);
      // 获取日
      var d = dt
        .getDate()
        .toString()
        .padStart(2, "0");
      // d = d < 10 ? "0" + d : d
      // console.log(d);
      // 获取时
      var hh = dt
        .getHours()
        .toString()
        .padStart(2, "0");
      // hh = hh < 10 ? "0" + hh : hh
      // 获取分
      var mm = dt
        .getMinutes()
        .toString()
        .padStart(2, "0");
      // mm = mm < 10 ? "0" + mm : mm
      // 获取秒
      var ss = dt
        .getSeconds()
        .toString()
        .padStart(2, "0");
      // ss = ss < 10 ? "0" + ss : ss;
      return `${y} - ${m} - ${d}  ${hh} : ${mm} : ${ss}`;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped>
.expressage {
  margin: 20px;
  h2 {
    margin: 20px 0;
  }
  .block {
    margin-top: 20px;
  }
  .expressModel {
    .mask {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .content {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      z-index: 100;
      background-color: #fff;
      transition: 0.5s;
      opacity: 0;
      padding: 30px 60px;
      border-radius: 10px;
      visibility: hidden;
      h3 {
        margin-bottom: 15px;
      }
      ::v-deep .el-form-item__label:before {
        content: "";
      }
    }
    .userContent {
      top: 20%;
      opacity: 1;
      visibility: visible;
      .el-form-item{
        .el-form-item__content{
          .el-input{
            width: 300px;
          }
        }
      }
    }
  }
}
</style>
